<template>
    <div class="subject-content">

        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-form-item label="字典名称" prop="dictName">
                <el-input v-model="queryParams.dictName" placeholder="请输入字典名称" clearable style="width: 140px"
                          @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="字典类型" prop="dictType">
                <el-input v-model="queryParams.dictType" placeholder="请输入字典类型" clearable style="width: 140px"
                          @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="字典状态" clearable style="width: 110px">
                    <el-option v-for="dict in dict.dictType.status" :key="dict.value" :label="dict.dictLabel"
                               :value="dict.dictValue"/>
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间" prop="dateTimeRangeCreate">
                <el-date-picker
                        style="width: 340px"
                        v-model="queryParams.dateTimeRangeCreate"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetimerange"
                        :picker-options="pickerOptions"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"/>
            </el-form-item>

            <el-form-item label="更新时间" prop="dateTimeRangeUpdate">
                <el-date-picker
                        style="width: 340px"
                        v-model="queryParams.dateTimeRangeUpdate"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetimerange"
                        :picker-options="pickerOptions"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"/>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="searchQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>

        </el-form>


        <el-row :gutter="10" style="margin-bottom: 15px">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-edit" size="mini" @click="handleUpdate">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" @click="handleDelete" size="mini">删除</el-button>
            </el-col>
        </el-row>


        <el-table v-loading="loading" :data="dictList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="字典编号" align="center" prop="dictId"/>
            <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true"/>
            <el-table-column label="字典类型" align="center" prop="dictType" :show-overflow-tooltip="true">
                <template v-slot="scope">
                    <router-link :to="'/system/dict-data/' + scope.row.dictId" class="link-type">
                        <span>{{ scope.row.dictType }}</span>
                    </router-link>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
                <template v-slot="scope">
                    <dictTag :options="dict.dictType.status" :value="scope.row.status"/>
                </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
            <el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
            <el-table-column label="更新时间" align="center" prop="updateTime" width="180"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template  v-slot="scope">
                    <el-button type="text" size="small" icon="el-icon-edit" @click="rowUpdate(scope.row)">修改
                    </el-button>
                    <el-button type="text" size="small" icon="el-icon-delete" @click="rowDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <page
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.current"
                :limit.sync="queryParams.size"
                @pagination="getList"
        />


        <!--  添加或修改 -->
        <el-dialog :title="title" :visible.sync="open" width="600px" :show-close="false" append-to-body>
            <el-form ref="dictForm" :model="dictForm" :rules="rules" size="small" label-width="70px">

                <el-form-item label="字典名称" prop="dictName">
                    <el-input v-model="dictForm.dictName" placeholder="请输入字典名称" clearable size="small"
                              style="width: 300px"></el-input>
                </el-form-item>

                <el-form-item label="字典类型" prop="dictType">
                    <el-input v-model="dictForm.dictType" placeholder="请输入字典类型" clearable size="small"
                              style="width: 300px"></el-input>
                </el-form-item>

                <el-form-item label="状态" prop="status">
                    <el-select v-model="dictForm.status" placeholder="字典状态" clearable style="width: 110px">
                        <el-option v-for="dict in dict.dictType.status" :key="dict.value" :label="dict.dictLabel"
                                   :value="dict.dictValue"/>
                    </el-select>
                </el-form-item>

                <el-form-item label="备注" prop="remark">
                    <el-input
                            type="textarea"
                            v-model="dictForm.remark"
                            placeholder="请输入备注"
                            clearable
                            size="small"
                            maxlength="200"
                            :autosize="{ minRows: 8, maxRows: 8}"
                            show-word-limit
                            style="width: 400px"/>
                </el-form-item>

            </el-form>

            <div slot="footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </div>

        </el-dialog>


    </div>


</template>

<script>
import {
    addDictType,
    deleteDictTypeById,
    deleteDictTypeByIds,
    dictList,
    selectDictById,
    updateDicType
} from "@/api/admin/dict/dict";
import Page from "@/components/page.vue";
import dictTag from "@/components/dictTag.vue";

export default {
    name: "dict",
    dicts: ["status"],
    components: {Page, dictTag},
    data() {
        return {
            // 遮罩层
            loading: true,
            // 是否显示弹出层
            open: false,
            // 弹出层标题
            title: "",
            // 选中数组
            ids: [],
            // 总条数
            total: 0,
            //表格数据
            dictList: [],
            // 查询参数  current 当前页   size 页大小
            queryParams: {
                current: 1,
                size: 10,
                dictName: undefined,
                dictType: undefined,
                status: undefined,
                dateTimeRangeCreate: [],
                dateTimeRangeUpdate: [],
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            // 添加、修改提交参数
            dictForm: {},
            // 表单数据校验
            rules: {},


        }
    },
    methods: {
        /**
         * 根据条件分页查询字典类型列表
         */
        getList() {
            dictList(this.queryParams).then(res => {
                this.dictList = res.data.records;
                this.total = res.data.total;
                this.loading = false;
            })
        },
        /** 搜索按钮操作 */
        searchQuery() {
            this.queryParams.current = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.searchQuery();
        },
        /** 表单重置 */
        reset() {
            this.dictForm = {
                dictId: undefined,
                dictName: undefined,
                dictType: undefined,
                status: undefined,
                remark: undefined
            };
            this.resetForm("dictForm");
        },
        /** 头工具栏--添加*/
        handleAdd() {
            this.reset();
            this.dictForm.status = '0'
            this.title = "添加字典类型"
            this.open = true
        },
        /** 头工具栏--修改*/
        handleUpdate() {
            if (this.ids.length === 0) {
                this.$modal.msgWarning('请选择要修改的字典类型！')
            } else if (this.ids.length > 1) {
                this.$modal.msgWarning('请选择一条字典类型进行修改！')
            } else {
                this.reset();
                const dictId = this.ids
                selectDictById(dictId).then(res => {
                    this.dictForm = res.data;
                    this.title = "修改字典类型"
                    this.open = true;
                })
            }
        },
        /** 头工具栏--删除*/
        handleDelete() {
            const data = this.ids;
            const size = data.length
            this.$modal.confirm('是否确认删除？').then(function () {
                return deleteDictTypeByIds(data)
            }).then(res => {
                this.getList()
                this.$modal.msgSuccess(res.msg + "," + size + "条数据");
            })
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs.dictForm.validate(valid => {
                if (valid) {
                    if (this.dictForm.dictId != undefined) {
                        updateDicType(this.dictForm).then(res => {
                            this.$modal.msgSuccess(res.msg);
                            this.open = false;
                            this.getList()
                        })
                    } else {
                        addDictType(this.dictForm).then(res => {
                            this.$modal.msgSuccess(res.msg);
                            this.open = false;
                            this.getList()
                        })
                    }
                }
            })
        },
        /**取消按钮 */
        cancel() {
            this.open = false;
            this.reset();
        },

        /**行工具--修改 */
        rowUpdate(row) {
            this.reset();
            const dictId = row.dictId
            selectDictById(dictId).then(res => {
                this.dictForm = res.data;
                this.title = "修改字典类型"
                this.open = true;
            })
        },
        /**行工具--删除 */
        rowDelete(row) {
            const dictId = row.dictId
            this.$modal.confirm('是否确认删除？').then(function () {
                return deleteDictTypeById(dictId)
            }).then(res => {
                this.getList();
                this.$modal.msgSuccess(res.msg);
            })
        },


        /**多选框选中数据*/
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.dictId)
        },
    },
    created() {
        this.getList();
    },
}
</script>

<style scoped>

/deep/ .el-dialog {
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 2500 !important;
    margin-top: 0 !important;
    height: 100%;
}

</style>
